<%-- 
    Document   : requestcourse
    Created on : 21 Sep 2013, 4:26:15 PM
    Author     : Salman Noor : School of Electrical and Information Engineering
--%>
<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/WEB-INF/common/hometaglibs.jsp" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <body>
        <div id="mainContainer">
            <h1 class="exampleTitle"><strong>Work Allocation</strong> System</h1>            
            <div id="mainSubContainer">
                <div id="leftNav">
                    <%@include file="/WEB-INF/includes/sideNavBar.jsp" %>
                </div>
                <div id="actualSuperContentContainer">
                    <h1 class="exampleTitle subTitle">Request to teach a <strong>Course</strong></h1>   
                    <div id="example" class="k-content">


                        <input name='baseURL' type='hidden' value='<c:url value="/allocations/Courses/"/>'/>
                        <div id="successMessage" style="display:none;" class="k-block k-success-colored"><span class="k-icon k-i-tick"></span> &nbsp;&nbsp;Course Allocation has been sent to HOD for approval.</div>
                        <div id="errorMessage" style="display:none;" class="k-block k-error-colored"><span class="k-icon k-i-exception"></span> &nbsp;&nbsp;<span>Error. Teaching request could not be saved. Possible Cause:&nbsp; </span><span></span></div>
                        <div class='formElementHolder'>
                            <label for="course_allocation" class="k-label-top">Select Course:</label>
                            <input id="course_allocation" name="course allocation" style="width: 350px;" required data-message="course is required" />
                        </div>
                        <div class='formElementHolder'>
                            <label for="start_date" class="k-label-top">Start Date for Course:</label>
                            <input id="start_date" name="start date" style="width:350px;"  required data-message="start date is required" />
                        </div>
                        <button id="allocateCourse" class="k-button">Request Allocation</button>
                        <script>
                            $(document).ready(function() {
                                var baseUrl = $("input[name='baseURL']").val();
                                var $datePicker = $("#start_date").kendoDatePicker({
                                    format: "yyyy-MM-dd"
                                });
                                $("#successMessage").hide();
                                $("#course_allocation").kendoComboBox({
                                    placeholder: "Select Course to Teach",
                                    dataTextField: "course_full_name",
                                    dataValueField: "course_id",
                                    filter: "contains",
                                    autoBind: true,
                                    minLength: 2,
                                    dataSource: {
                                        serverFiltering: true,
                                        transport: {
                                            read: {
                                                url: baseUrl + "read",
                                                type: "POST",
                                                dataType: "json"
                                            }
                                        }
                                    }
                                });

                                var $validatable = $("#actualSuperContentContainer").kendoValidator({
                                    rules: {
                                        custom: function(input) {
                                            if (input.is("[name='start date']")) {
                                            }
                                            return true;
                                        }
                                    }

                                });
                                $("#allocateCourse").click(function(e) {
                                    e.preventDefault();
                                    $("#successMessage").hide();
                                    if ($validatable.data("kendoValidator").validate()) {

                                        $.ajax({
                                            type: "POST",
                                            async: true,
                                            url: baseUrl + "create",
                                            data: {course_allocation: $("#course_allocation").val(), start_date: $("#start_date").val()},
                                            error: function(xhr, status, error) {
                                                $("#errorMessage").find("span:last").empty();

                                                $("#errorMessage").find("span:last").text(error);
                                                $("#errorMessage").fadeIn("normal", function() {
                                                    setTimeout(function() {
                                                        $("#errorMessage").fadeOut();
                                                    }, 5000);
                                                });
                                            },
                                            success: function(data) {
                                                $("#actualSuperContentContainer").find("input").val("");
                                                $("#successMessage").fadeIn("normal", function() {
                                                    setTimeout(function() {
                                                        $("#successMessage").fadeOut();
                                                    }, 3000);

                                                });

                                            }
                                        });

                                    }
                                });

                            });
                        </script>
                        <style>
                            .formElementHolder{width:700px;padding: 15px;}
                            .formElementHolder label{float:left;width:300px; text-align: right; padding-right: 10px;}

                        </style>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
